// React应用主组件，提供跨境数据合规审查功能
// 包含敏感数据检测和合规检查两个核心功能
import React, { useState } from 'react';
import { Button, Input, Card, List, Typography, Switch, Row, Col, Divider } from 'antd';

// App 主应用组件
// 管理应用状态，处理用户输入，调用后端API并展示结果
function App() {
  // 组件状态定义
  const [text, setText] = useState('');  // 用户输入的文本
  const [detectResult, setDetectResult] = useState(null);  // 敏感数据检测结果
  const [complianceResult, setComplianceResult] = useState(null);  // 合规检查结果
  const [loading, setLoading] = useState(false);  // 加载状态

  // handleDetect 处理敏感数据检测请求
  // 向后端服务发送文本，获取敏感数据检测结果
  const handleDetect = async () => {
    setLoading(true);
    try {
      // 通过反向代理访问Go服务
      let res;
      try {
        res = await fetch('/api/go/detect', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({text})
        });
      } catch (goServiceError) {
        // 如果Go服务不可用，则尝试Python服务
        res = await fetch('/api/python/detect', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({text})
        });
      }
      
      const data = await res.json();
      setDetectResult(data);
    } catch (error) {
      console.error('检测出错:', error);
    } finally {
      setLoading(false);
    }
  };

  // handleCompliance 处理合规检查请求
  // 向后端服务发送文本，获取合规检查结果
  const handleCompliance = async () => {
    setLoading(true);
    try {
      // 通过反向代理访问Go服务
      let res;
      try {
        res = await fetch('/api/go/compliance', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({text})
        });
      } catch (goServiceError) {
        // 如果Go服务不可用，则尝试Python服务
        res = await fetch('/api/python/compliance', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({text})
        });
      }
      
      const data = await res.json();
      setComplianceResult(data);
    } catch (error) {
      console.error('合规检查出错:', error);
    } finally {
      setLoading(false);
    }
  };

  // handleClear 清空所有输入和结果
  // 重置文本输入框和检测结果
  const handleClear = () => {
    setText('');
    setDetectResult(null);
    setComplianceResult(null);
  };

  // 渲染应用界面
  return (
    <div style={{ padding: 20 }}>
      <Card title="跨境数据合规审查系统" style={{ maxWidth: 800, margin: '0 auto' }}>
        <div style={{ marginBottom: 20 }}>
          <Input.TextArea 
            value={text} 
            onChange={e => setText(e.target.value)} 
            rows={6} 
            placeholder="请输入需要检测的文本内容，例如：
1. 包含手机号的文本：联系电话是13812345678
2. 包含身份证号的文本：身份证号为110101199003077532
3. 包含邮箱的文本：我的邮箱是example@test.com
4. 包含银行卡号的文本：银行卡号为6222021234567890123"
          />
        </div>
        
        // 操作按钮区域
        <Row gutter={16} style={{ marginBottom: 20 }}>
          <Col span={8}>
            <Button 
              type="primary" 
              onClick={handleDetect} 
              loading={loading}
              block
            >
              敏感数据检测
            </Button>
          </Col>
          <Col span={8}>
            <Button 
              type="primary" 
              onClick={handleCompliance} 
              loading={loading}
              block
            >
              合规检查
            </Button>
          </Col>
          <Col span={8}>
            <Button 
              onClick={handleClear} 
              block
            >
              清空结果
            </Button>
          </Col>
        </Row>

        // 敏感数据检测结果显示区域
        {detectResult && (
          <Card title="敏感数据检测结果" size="small" style={{ marginTop: 20 }}>
            <p><strong>输入文本:</strong> {detectResult.input}</p>
            <p><strong>处理后文本:</strong> {detectResult.output}</p>
            <p>
              <strong>是否包含敏感信息:</strong> 
              <Switch checked={detectResult.is_sensitive} disabled /> 
              <span style={{ marginLeft: 10 }}>
                {detectResult.is_sensitive ? '是' : '否'}
              </span>
            </p>
            {detectResult.issues && detectResult.issues.length > 0 && (
              <div>
                <strong>检测到的问题:</strong>
                <List
                  size="small"
                  dataSource={detectResult.issues}
                  renderItem={item => <List.Item>{item}</List.Item>}
                />
              </div>
            )}
          </Card>
        )}

        // 合规检查结果显示区域
        {complianceResult && (
          <Card title="合规检查结果" size="small" style={{ marginTop: 20 }}>
            <p><strong>检查数据:</strong> {complianceResult.data}</p>
            <p>
              <strong>是否合规:</strong> 
              <Switch checked={complianceResult.is_compliant} disabled /> 
              <span style={{ marginLeft: 10 }}>
                {complianceResult.is_compliant ? '是' : '否'}
              </span>
            </p>
            {complianceResult.issues && complianceResult.issues.length > 0 && (
              <div>
                <strong>不合规问题:</strong>
                <List
                  size="small"
                  dataSource={complianceResult.issues}
                  renderItem={item => <List.Item>{item}</List.Item>}
                />
              </div>
            )}
          </Card>
        )}
      </Card>
      
      // 功能说明区域
      <Card title="系统功能说明" style={{ maxWidth: 800, margin: '20px auto' }}>
        <Divider orientation="left">支持的敏感数据类型</Divider>
        <ul>
          <li><strong>手机号码</strong>: 中国手机号码 (11位，以1开头，第二位为3-9)</li>
          <li><strong>身份证号</strong>: 中国身份证号码 (18位，最后一位可能是X)</li>
          <li><strong>邮箱地址</strong>: 标准邮箱格式</li>
          <li><strong>银行卡号</strong>: 银行卡号 (16-19位数字)</li>
        </ul>
        
        <Divider orientation="left">数据脱敏说明</Divider>
        <ul>
          <li><strong>手机号码</strong>: 保留前3位和后4位，中间4位用*代替</li>
          <li><strong>身份证号</strong>: 保留前6位和后4位，中间8位用*代替</li>
          <li><strong>邮箱地址</strong>: 保留@符号前后完整信息，邮箱用户名部分保留首尾字符，中间用*代替</li>
          <li><strong>银行卡号</strong>: 保留前6位和后4位，中间部分用*代替</li>
        </ul>
      </Card>
    </div>
  );
}

export default App;